<template>
	<view>
		<!-- 导航栏 -->
		<free-nav-bar  showBack title="客服帮助" ></free-nav-bar>
		
		<!-- 滚动区域 -->
		<scroll-view scroll-y="true" :style="'height:'+scrollHeight+'px;'">
			<title-list title="客服帮助" :isTitle="true" ></title-list>
			
			<view class="w-100 flex" style="height: 156rpx;">
				<view class="flex flex-column justify-center align-center ml-3">
					<image src="../../../static/icon/icon_dingdan_sel.png" mode="widthFix" style="width: 48rpx;" ></image>
					<text class="font-sm mt-2">退款/售后</text>
				</view>
				<view class="flex flex-column justify-center align-center ml-4">
					<image src="../../../static/icon/icon_dingdan_sel.png" mode="widthFix" style="width: 48rpx;" ></image>
					<text class="font-sm mt-2">投诉/建议</text>
				</view>
			</view>
			
			<title-list title="猜您想问" :isTitle="true" ></title-list>
			
			<!-- 手风琴效果 -->
			<uni-collapse accordion="true" class="px-2" style="box-sizing: border-box;" v-if="List.length>0">
				 
			    <uni-collapse-item :title="item.problem" v-for="(item,index) in List" :key="index"  >
			        <view  class="border-top py-3 text-secondary">{{item.answer}}</view>
			    </uni-collapse-item>
			 
			</uni-collapse>
			
			
			
		</scroll-view>
		
		<!-- 底部 -->
		<view class="flex flex-column  position-relative " style="height: 342rpx">
			<view class="buttonStyle position-absolute flex justify-center align-center main-bg-color">
				<view class="text-white font-md">
					<text class="iconfont icon-kefu"></text>
					<text class="px-1">客服</text>
				</view>
			</view>
			<text class="position-absolute textStyle text-light ">客服工作时间：工作日9:00-17:30</text>
		</view>
	</view>
</template>

<script>
	import freeNavBar from '@/components/common/nav-bar/free-nav-bar.vue';
	import titleList from '@/components/common/list/title-list.vue';
	import uniCollapse from '@/components/uni-ui/uni-collapse/uni-collapse.vue';
	import uniCollapseItem from '@/components/uni-ui/uni-collapse-item/uni-collapse-item.vue';
	export default {
		components: {
			freeNavBar,
			titleList,
			uniCollapse,
			uniCollapseItem
		},
		data() {
			return {
				scrollHeight:0,
				List:[
					{
						problem:'1.问题问提问题问提问题问提问题问题提问题',
						answer:' 回答回答回答回答回答回答回答回答回答回答回答回答回回答回答回答回答回答回答回答回答回答回答回答回答回'
					}
				]
			}
		},
		onLoad() {
			this.mathList()
		},
		methods: {
			mathList(){
				let res = uni.getSystemInfoSync()
				this.top = res.statusBarHeight + uni.upx2px(88)
				this.scrollHeight = res.windowHeight - this.top - uni.upx2px(342)
			},
		}
	}
</script>

<style>
.buttonStyle{
	height: 90rpx;
	width: 698rpx;
	left: 26rpx;
	right: 26rpx;
	bottom: 96rpx;
}
.textStyle{
	left: 196rpx;
	right: 196rpx;
	bottom: 42rpx;
	white-space: nowrap;
}
</style>
